<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <!-- 引入Tailwind CSS -->
    <script src="./js/tailwindcss@3.4.17/tailwindcss.js"></script>
    <!-- 引入Font Awesome -->
    <link href="./css/font-awesome@4.7.0/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体，保持与注册页面一致 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        neutral: '#F3F4F6',
                        dark: '#1F2937'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <!-- 自定义工具类 -->
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .form-input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            .btn-primary {
                @apply bg-primary hover:bg-primary/90 text-white font-medium py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-[1.02] active:scale-[0.98] focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .card-shadow {
                @apply shadow-lg hover:shadow-xl transition-shadow duration-300;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen font-sans text-dark flex items-center justify-center p-4">
    <div class="w-full max-w-md">
        <!-- 登录卡片 -->
        <div class="bg-white rounded-2xl p-8 card-shadow">
            <!-- 标题区域 -->
            <div class="text-center mb-8">
                <div class="w-16 h-16 bg-primary/10 rounded-full flex items-center justify-center mx-auto mb-4">
                    <i class="fa fa-user-circle text-primary text-3xl"></i>
                </div>
                <h1 class="text-[clamp(1.8rem,5vw,2.2rem)] font-bold text-dark mb-2">欢迎回来</h1>
                <p class="text-gray-500">请输入账号信息登录</p>
            </div>
            
            <!-- 登录表单 -->
            <form id="loginForm" class="space-y-6">
                <!-- 手机号输入 -->
                <div class="space-y-2">
                    <label for="phone" class="block text-sm font-medium text-gray-700">
                        手机号
                    </label>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-phone"></i>
                        </span>
                        <input 
                            type="tel" 
                            id="phone" 
                            name="phone" 
                            required
                            placeholder="请输入手机号" 
                            class="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
                            pattern="^1[3-9]\d{9}$"
                        >
                        <span id="phoneError" class="hidden text-red-500 text-sm mt-1">请输入有效的手机号</span>
                    </div>
                </div>
                
                <!-- 密码输入 -->
                <div class="space-y-2">
                    <div class="flex justify-between">
                        <label for="password" class="block text-sm font-medium text-gray-700">
                            密码
                        </label>
                        <a href="#" class="text-sm text-primary hover:text-primary/80 transition-colors">
                            忘记密码？
                        </a>
                    </div>
                    <div class="relative">
                        <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                            <i class="fa fa-lock"></i>
                        </span>
                        <input 
                            type="password" 
                            id="password" 
                            name="password" 
                            required
                            placeholder="请输入密码" 
                            class="w-full pl-10 pr-10 py-3 border border-gray-300 rounded-lg form-input-focus transition-all duration-200"
                            minlength="6"
                        >
                        <button 
                            type="button" 
                            id="togglePassword" 
                            class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-primary transition-colors"
                        >
                            <i class="fa fa-eye-slash"></i>
                        </button>
                        <span id="passwordError" class="hidden text-red-500 text-sm mt-1">密码长度不能少于6位</span>
                    </div>
                </div>
                
                <!-- 记住我选项 -->
                <div class="flex items-center">
                    <input 
                        id="remember" 
                        name="remember" 
                        type="checkbox" 
                        class="h-4 w-4 text-primary focus:ring-primary border-gray-300 rounded transition-colors"
                    >
                    <label for="remember" class="ml-2 block text-sm text-gray-700">
                        记住我
                    </label>
                </div>
                
                <!-- 登录按钮 -->
                <button 
                    type="submit" 
                    class="w-full btn-primary flex items-center justify-center"
                >
                    <span>登录</span>
                    <i class="fa fa-sign-in ml-2"></i>
                </button>
            </form>
            
            <!-- 注册选项 -->
            <div class="mt-6 text-center">
                <p class="text-gray-600">
                    还没有账号？
                    <a href="#" class="text-primary hover:text-primary/80 font-medium transition-colors">
                        立即注册
                    </a>
                </p>
            </div>
            
            <!-- 其他登录方式 -->
            <div class="mt-8">
                <div class="relative">
                    <div class="absolute inset-0 flex items-center">
                        <div class="w-full border-t border-gray-200"></div>
                    </div>
                    <div class="relative flex justify-center text-sm">
                        <span class="px-2 bg-white text-gray-500">其他登录方式</span>
                    </div>
                </div>
                
                <div class="flex justify-center space-x-6 mt-4">
                    <button class="w-12 h-12 rounded-full bg-[#07C160]/10 flex items-center justify-center text-[#07C160] hover:bg-[#07C160]/20 transition-colors">
                        <i class="fa fa-weixin text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full bg-[#1DA1F2]/10 flex items-center justify-center text-[#1DA1F2] hover:bg-[#1DA1F2]/20 transition-colors">
                        <i class="fa fa-qq text-xl"></i>
                    </button>
                    <button class="w-12 h-12 rounded-full bg-[#E4405F]/10 flex items-center justify-center text-[#E4405F] hover:bg-[#E4405F]/20 transition-colors">
                        <i class="fa fa-weibo text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <div class="mt-6 text-center text-gray-500 text-sm">
            <p>登录即表示您同意我们的<a href="#" class="hover:text-primary">服务条款</a>和<a href="#" class="hover:text-primary">隐私政策</a></p>
        </div>
    </div>

    <script>
        // 获取DOM元素
        const loginForm = document.getElementById('loginForm');
        const phoneInput = document.getElementById('phone');
        const passwordInput = document.getElementById('password');
        const togglePassword = document.getElementById('togglePassword');
        
        // 错误提示元素
        const phoneError = document.getElementById('phoneError');
        const passwordError = document.getElementById('passwordError');
        
        // 切换密码可见性
        togglePassword.addEventListener('click', () => {
            const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
            passwordInput.setAttribute('type', type);
            togglePassword.querySelector('i').classList.toggle('fa-eye');
            togglePassword.querySelector('i').classList.toggle('fa-eye-slash');
        });
        
        // 实时验证手机号
        phoneInput.addEventListener('input', () => {
            const phonePattern = /^1[3-9]\d{9}$/;
            if (!phonePattern.test(phoneInput.value) && phoneInput.value !== '') {
                phoneError.classList.remove('hidden');
                phoneInput.classList.add('border-red-500');
                phoneInput.classList.remove('border-gray-300', 'border-green-500');
            } else {
                phoneError.classList.add('hidden');
                phoneInput.classList.remove('border-red-500');
                if (phoneInput.value !== '') {
                    phoneInput.classList.add('border-green-500');
                } else {
                    phoneInput.classList.add('border-gray-300');
                }
            }
        });
        
        // 实时验证密码长度
        passwordInput.addEventListener('input', () => {
            if (passwordInput.value.length < 6 && passwordInput.value !== '') {
                passwordError.classList.remove('hidden');
                passwordInput.classList.add('border-red-500');
                passwordInput.classList.remove('border-gray-300', 'border-green-500');
            } else {
                passwordError.classList.add('hidden');
                passwordInput.classList.remove('border-red-500');
                if (passwordInput.value !== '') {
                    passwordInput.classList.add('border-green-500');
                } else {
                    passwordInput.classList.add('border-gray-300');
                }
            }
        });
        
        // 表单提交处理
        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            // 验证所有字段
            let isValid = true;
            
            // 验证手机号
            const phonePattern = /^1[3-9]\d{9}$/;
            if (!phonePattern.test(phoneInput.value)) {
                phoneError.classList.remove('hidden');
                phoneInput.classList.add('border-red-500');
                isValid = false;
            }
            
            // 验证密码
            if (passwordInput.value.length < 6) {
                passwordError.classList.remove('hidden');
                passwordInput.classList.add('border-red-500');
                isValid = false;
            }
            
            // 如果验证通过，提交表单
            if (isValid) {
                // 这里可以添加AJAX提交逻辑
                alert('登录成功！');
                
                // 检查是否需要记住密码
                const rememberMe = document.getElementById('remember').checked;
                if (rememberMe) {
                    console.log('用户选择了记住密码');
                    // 这里可以添加记住密码的逻辑
                }
            }
        });
        
        // 添加输入框获得/失去焦点效果
        const inputs = [phoneInput, passwordInput];
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('scale-[1.01]');
                input.parentElement.style.transition = 'transform 0.2s ease';
            });
            
            input.addEventListener('blur', () => {
                input.parentElement.classList.remove('scale-[1.01]');
            });
        });
        
        // 社交登录按钮动画
        const socialButtons = document.querySelectorAll('.flex.justify-center.space-x-6 button');
        socialButtons.forEach(button => {
            button.addEventListener('mouseenter', () => {
                button.classList.add('scale-110');
                button.style.transition = 'transform 0.2s ease';
            });
            
            button.addEventListener('mouseleave', () => {
                button.classList.remove('scale-110');
            });
            
            button.addEventListener('click', () => {
                const platform = button.querySelector('i').classList.contains('fa-weixin') ? '微信' : 
                                 button.querySelector('i').classList.contains('fa-qq') ? 'QQ' : '微博';
                alert(`即将使用${platform}登录`);
            });
        });
    </script>
</body>
</html>
